<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Excel整合</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 10px;
        }
        table, th, td {
            border: 1px solid black;
        }
        th, td {
            padding: 8px;
            text-align: left;
        }
    </style>
</head>
<body>
<div>
    <h2>区域1</h2>
    <input type="file" id="file1">
    <button onclick="importExcel(1)">导入Excel</button>
    <div id="data1"></div>
</div>
<div>
    <h2>区域2</h2>
    <input type="file" id="file2">
    <button onclick="importExcel(2)">导入Excel</button>
    <div id="data2"></div>
</div>
<div>
    <h2>整合区域</h2>
    <div id="data3"></div>
</div>
<button onclick="mergeData()">整合</button>
<button onclick="exportExcel()">导出</button>

<script>
    let data1 = [];
    let data2 = [];
    let mergedData = [];

    function importExcel(region) {
        const fileInput = region === 1 ? document.getElementById('file1') : document.getElementById('file2');
        const file = fileInput.files[0];
        const formData = new FormData();
        formData.append('file', file);
        const sessionKey = region === 1 ? 'first_data' : 'second_data';
        formData.append('sessionKey',sessionKey)

        fetch('api/excel/import', {
            method: 'POST',
            body: formData
        })
            .then(response => response.json())
            .then(data => {
                if (region === 1) {
                    data1 = data.data;
                    displayData(data1, 'data1');
                } else {
                    data2 = data.data;
                    displayData(data2, 'data2');
                }
            });
    }

    function displayData(data, containerId) {
        const container = document.getElementById(containerId);
        container.innerHTML = '';

        if (data.length === 0) {
            container.innerText = '没有数据';
            return;
        }

        const table = document.createElement('table');
        const thead = document.createElement('thead');
        const tbody = document.createElement('tbody');

        // 创建表头
        const headerRow = document.createElement('tr');
        Object.keys(data[0]).forEach(key => {
            const th = document.createElement('th');
            th.innerText = key;
            headerRow.appendChild(th);
        });
        thead.appendChild(headerRow);
        table.appendChild(thead);

        // 创建表格内容
        data.forEach(row => {
            const tr = document.createElement('tr');
            Object.values(row).forEach(value => {
                const td = document.createElement('td');
                td.innerText = value;
                tr.appendChild(td);
            });
            tbody.appendChild(tr);
        });
        table.appendChild(tbody);

        container.appendChild(table);
    }

    function mergeData() {
        fetch('api/excel/merge', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ data1: data1, data2: data2 })
        })
            .then(response => response.json())
            .then(data => {
                mergedData = data.data;
                displayData(mergedData, 'data3');
                alert('数据整合成功');
            });
    }

    function exportExcel() {
        window.open('/api/excel/exportExcel');
    }
</script>
</body>
</html>